<template>
  <el-container>
    <el-header class="header">
      <el-menu
        :default-active="active"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        router
        active-text-color="#ffd04b">
        <el-menu-item index="home">
          <i class="el-icon-menu"></i>
          <span slot="title">关系图1</span>
        </el-menu-item>
        <el-menu-item index="about">
          <i class="el-icon-document"></i>
          <span slot="title">关系图2</span>
        </el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
        <div id="echartTree" style="width: 100%;height: 800px"></div>
    </el-main>
  </el-container>
</template>

<script>

import jsonData from './flare.json'

export default {
  name: 'about',
  components: {},
  data() {
    return {
      active: 'about',
      myChart: null,
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const myChart = this.$echarts.init(document.getElementById('echartTree'));
      myChart.showLoading();
      const data = jsonData
      myChart.hideLoading();
      this.$echarts.util.each(data.children, (datum, index) => {
        index % 2 === 0 && (datum.collapsed = true);
      });

      myChart.setOption({
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
        },
        series: [
          {
            type: 'tree',
            data: [data],
            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 9,
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left',
              },
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
          },
        ],
      })
    },
    handleSelect() {},
  },
};
</script>
<style lang="scss" scoped>
$--color-primary: #FFC340;
.header {
  padding: 0;
  background-color: $--color-primary;
}
.image {
  width: 220px;
  height: 110px;
}
.image-slot {
  height: 110px;
  line-height: 110px;
}
</style>
